<template>
  <!-- 有子菜单时渲染 el-sub-menu -->
  <el-sub-menu class="app__menu__item" v-if="item.children?.length" :index="item.path">
    <template #title>
      <el-icon><component :is="item.icon" /></el-icon>
      <span>{{ item.label }}</span>
    </template>
    <!-- 递归调用自身 -->
    <menu-item v-for="child in item.children" :key="child.name" :item="child" :level="level + 1" />
  </el-sub-menu>

  <!-- 没有子菜单时渲染 el-menu-item -->
  <!-- 第一层级 -->
  <el-menu-item class="app__menu__item" v-else-if="level === 1" :index="item.path">
    <el-icon><component :is="item.icon" /></el-icon>
    <span>{{ item.label }}</span>
  </el-menu-item>
  <!-- 子层级 -->
  <el-menu-item class="menu__item app__menu__item" v-else :index="item.path">
    <el-icon><component :is="item.icon" /></el-icon>
    <span>{{ item.label }}</span>
  </el-menu-item>
</template>
<script>
// 递归组件需要明确 name 才能调用自身
export default {
  name: 'MenuItem',
  props: {
    level: {
      type: Number,
      default: 1
    },
    item: {
      type: Object,
      required: true
    }
  }
}
</script>
<style scoped>
.menu__item:hover {
  background-color: #001528;
}

.app__menu__item .el-icon {
  left: -4px;
  margin-right: 12px;
}
.menu__item {
  background-color: #1f2d3d;
}
</style>